<!-- 这是一个使用Vue 2选项式API编写的单文件组件（SFC） -->
<!-- 选项式API通过定义对象的选项（如data、methods等）来组织组件逻辑 -->
<script>
// 导出一个Vue组件选项对象
export default {
    // data选项：用于定义组件的响应式数据
    // 必须是一个函数，返回一个对象（避免组件复用时光响式数据共享）
    data() {
        return {
            number: 1  // 定义一个响应式数据number，初始值为1
        }
    },
    // methods选项：用于定义组件的方法（事件处理、业务逻辑等）
    methods: {
        // 定义一个名为addNumber的方法，用于增加number的值
        addNumber() {
            // 通过this访问组件实例中的响应式数据number，并自增1
            // Vue会监听data中数据的变化，自动更新DOM
            this.number++
        }
    }
}
</script>

<!-- template选项：定义组件的HTML结构 -->
<template>
    <!-- 显示number的值，使用{{ }}插值语法 -->
    <div>数字：{{ number }}</div>

    <!--
        按钮元素，通过@click指令绑定点击事件
        @click是v-on:click的简写，绑定到methods中的addNumber方法
        点击按钮时，会触发addNumber方法，从而更新number的值
    -->
    <button @click="addNumber">+1</button>
</template>

<!-- style选项：定义组件的样式 -->
<!-- scoped属性：使样式仅作用于当前组件的元素，避免样式污染 -->
<style scoped>

</style>